<template>
  <div style="width: 200px;">
    <!-- 设置默认激活的菜单项 -->
    <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
      <el-submenu index="demo" v-for="(menu, index) in menus" :key="index" :index="menu.path">
        <template slot="title">
          <span>{{ menu.meta.title }}</span>
        </template>
        <el-menu-item v-for="(child, childIndex) in menu.children" :key="childIndex" :index="child.name">
          {{ child.meta.title }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {

      activeIndex: "form2",

      menus: [
        {
          path: "/demo",
          name: "demo",
          meta: { title: "功能模块" },
          children: [
            {
              path: "table",
              name: "table",
              meta: { title: "表格" }
            },
            {
              path: "form",
              name: "form",
              meta: { title: "表单" }
            },
            {
              path: "component",
              name: "component",
              meta: { title: "组件" }
            }
          ]
        },
        {
          path: "/demo2",
          name: "demo2",
          meta: { title: "功能模块" },
          children: [
            {
              path: "table2",
              name: "table2",
              meta: { title: "表格" }
            },
            {
              path: "form2",
              name: "form2",
              meta: { title: "表单" }
            },
            {
              path: "component2",
              name: "component2",
              meta: { title: "组件" }
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log("打开菜单:", key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log("关闭菜单:", key, keyPath);
    }
  }
};
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 400px;
}
</style>